<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            width: 714px;
            margin: 100px auto;
        }

        #tx {
            color: #eb8181 !important;
            float: left;
            width: 600px;
            height: 50px;
            outline: none;
            resize: none;
            background-color: rgb(203, 201, 201);
            border-radius: 25px;
            line-height: 50px;
            text-indent: 15px;
            overflow: hidden;
        }

        .txafter {
            background-color: pink !important;
            box-shadow: 10px 10px 10px 0px rgb(230, 153, 192);
        }

        button {
            margin-left: 10px;
            width: 51px;
            height: 51px;
            border-radius: 5px;
            background-color: #3faeed;
            border: none;
        }

        .count {
            margin-top: 5px;
            margin-left: 544px;
            width: 60px;
            height: 20px;
            color: rgb(175, 172, 172);
            display: none;
        }

        .num {
            float: left;
        }

        .content {
            display: none;
            margin: 100px 400px;
            width: 680px;
            height: 100px;
            border: 1px solid pink;
        }

        .content img {
            float: left;
            width: 50px;
            height: 50px;
            border-radius: 25px;
        }

        .content .ctt {
            margin-left: 20px;
            margin-top: 10px;
            float: left;
        }

        .content .ctt h3 {
            color: #106cc2;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <!-- 输入框 -->
    <div class="comment">
        <textarea name="" id="tx" cols="1" rows="1" maxlength="200"></textarea>
        <button>发布</button>
        <div class="count">
            <p class="num">0</p>
            <p> /200</p>
        </div>
    </div>

    <!-- 评论内容文本 -->
    <div class="content">
        <img src="images/7.png" alt="">
        <div class="ctt">
            <h3>安琪拉</h3>
            <p>Binggo,人家就是来砸场子的</p>
        </div>
    </div>

    <script>

        const tx = document.querySelector('#tx')
        const num = document.querySelector('.count .num')
        const count = document.querySelector('.comment .count')
        const button = document.querySelector('button')
        const content = document.querySelector('.content')
        const p = document.querySelector('.content p')

        tx.addEventListener('input', function () {
            num.innerHTML = `${tx.value.length}`
            // 输入文本后的样式
            count.style.display = 'block'
            tx.classList.add('txafter')
        })


        // 按enter键发布评论且计数为0文本清空
        tx.addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                // .trim()去除字符左右间隔
                if (tx.value.trim()) {
                    num.innerHTML = 0
                    content.style.display = 'block'
                    p.innerHTML = tx.value
                }
                tx.value = ''
            }
        })

        // 点击发布按钮发布评论或者按回车键发布评论
        button.addEventListener('click', function () {
            const date = new Date()
            content.style.display = 'block'
            p.innerHTML = tx.value
            p.innerHTML = date
        })

        // 鼠标离开复原监听事件
        tx.addEventListener('blur', function () {
            tx.value = ''
            count.style.display = 'none'
            tx.classList.remove('txafter')
        })
    </script>
</body>

</html>